<template>
	<div>
		<video autoplay controls loopobject-fit:cover crossOrigin="anonymous" id="videoElement"
			src="https://video19.ifeng.com/video09/2022/11/10/p6996366852502851668-102-150552.mp4?reqtype=tsl"></video>
		<button @click="selaction">截取</button>
		<img :src="imgUrl" alt="">
	</div>
</template>
<script>
	import urlConfig from "@/request/urlConfig.js";
	export default {
		data() {
			return {
				isPrinting: false,
				imgUrl: '',
				option: {}
			}
		},
		onLoad(option) {
			this.option = option
		},
		methods: {
			dataURLtoBlob(dataurl) {
				let arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new Blob([u8arr], {
					type: mime
				})

			},
			downloadFile(url, name = "What's the fuvk") {
				let a = document.createElement("a")
				a.setAttribute("href", url)
				a.setAttribute("download", name)
				a.setAttribute("target", "_blank")
				let clickEvent = document.createEvent("MouseEvents")
				clickEvent.initEvent("click", true, true)
				a.dispatchEvent(clickEvent)
			},
			downloadFileByBase64(base64, name) {
				let myBlob = this.dataURLtoBlob(base64)
				let myUrl = URL.createObjectURL(myBlob)
				this.downloadFile(myUrl, name)
			},
			async selaction() {
				let video = document.getElementsByTagName("video")[0] // 获取video节点
				let canvas = document.createElement("canvas") // 创建canvas节点
				let w = video?.clientWidth
				let h = video?.clientHeight
				canvas.width = w
				canvas.height = h // 设置宽高
				const ctx = canvas.getContext("2d")
				ctx?.drawImage(video, 0, 0, w, h) // video写入到canvas  clientHeight
				let imgUrl = canvas.toDataURL("image/png") // 生成截图地
				// this.imgUrl = imgUrl
				this.imgUrl = this.dataURLtoBlob(imgUrl)
				//  this.   downloadFileByBase64(imgUrl, "滴滴答答")
				try {
					const a = await this.uploadFilePromises(imgUrl, this.option.id)
					if (a.state == 1) {
						// this[key][idx].fileUrl = a.userSign
						this.option.url = a.userSign
						uni.$emit('back', this.option)
						uni.navigateBack()
					} else {
						setTimeout(() => {
							uni.$u.toast(a.message)
						}, 500);
						uni.navigateBack()
					}
				} catch (e) {
					console.log(e);
					setTimeout(() => {
						uni.$u.toast('对比失败')
					}, 500);
					uni.navigateBack()
					//TODO handle the exception
				}
			},
			uploadFilePromises(url, id) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: urlConfig.baseURL + '/wsd/operateOrder/checkFileImages', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							userId: id
						},
						header: {
							'User-Token': uni.getStorageSync('token') || "",
						},
						success: (res) => {
							console.log(res, "res");
							setTimeout(() => {
								resolve(JSON.parse(res.data)
									.datas)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="less" scoped></style>